<script setup lang="ts">
defineProps<{ ticks: number[] }>()
</script>

<template>
  <div class="capsule-ruler">
    <span v-for="t in ticks" :key="t">{{ t }}</span>
  </div>
</template>

<style scoped lang="scss">
.capsule-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  height: 20px;
  align-items: center;
}
</style>